<template>
	<view >
		<status-bar :title='title'></status-bar>
		<view class="rows p-re">
		
			<u-parse :content="ordInfo.order_content" :domain="imgUrl" @ready="Load = false" :previewImg="false" ></u-parse>
		
			<!-- 头部 -->
			<view class="head d-flex a-center p-left30 p-re">
				<image :src="share.imageUrl" mode="aspectFit"></image>
				<view class="right p-left24 d-flex f-column j-sb">
					<view class="color_33 size32">{{share.title}}</view>
					<view class="label white size26 text-center bold">企业认证</view>
				</view>
				<view class="back p-ab size32" @click="$back()">返回</view>
			</view>
		</view>
		
		
		<!-- 底部 -->
		<view class="subMit d-flex">
			<view class="left flexac white size36" @click="showFrom = true">{{ordInfo.order_title}}</view>
			<view class="right flexac bgwhite size36" @click="handleCall">立即咨询</view>
		</view>
		<view class="text-center p-bot50">
			<view class="back size32 m-top50 m-bot50" @click="$back()">返回店铺</view>
			<view class="support">慕格提供技术支持</view>
		</view>
		
		
		
		<u-popup :show="showFrom"  round="10" closeable @close="showFrom = false">
		        <view class="viewbox auto contact">
					
					<view class="row j-centert size42 bold p-top50">{{ordInfo.order_name}}</view>
					<fromlist :order_id="order_id" 
					         @submit="showFrom = false" 
							 :v_id="v_id" 
							 :VeriCode="VeriCode"
							 @cancelUp="showFrom = false">
				   </fromlist>
				</view>
		</u-popup>
		
		<Load v-if="Load"></Load>
	</view>
</template>  

<script>
	import {mapState} from 'vuex';
	import fromlist from '@/components/from/fromlist.vue'
	export default {
		components:{
			fromlist
		},
		data() {
			return {
				imgUrl:this.imgUrl,
				title:'',
				showFrom:false,
				order_id:2270,
				v_id:'10037599',
				VeriCode:'O2HNlBw0h*65uRxHlDnq5w==',
				config:[],
				ordInfo:'',
				Load:true,
			}
		},
		onLoad() {
			this.customForm();
		},
		methods: {
			customForm(){
				this.$http.post({
					url:'/SRA_CustomerForm/customForm',
					data:{
						ordId:this.order_id,
						v_id:this.v_id,
						VeriCode:this.VeriCode,
						source_bid: this.bid,
						source_v_id: this.vid,
						source_open_id: this.openid
					}
				}).then(res=>{
					if(res.code != 100) return this.$Toast(res.data);
					const {config,ordInfo} = res.data;
					this.config = config;
					this.ordInfo = ordInfo;
					this.title = ordInfo.order_name;
				})
			},
			handleCall(){
				uni.makePhoneCall({
					phoneNumber: this.ordInfo.order_tel
				})
			}
		},
		computed:{
			...mapState(['share','bid','vid','openid'])
		}
		
	}
</script>
<style>
	page{
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
</style>
<style lang="scss" scoped>
	.subMit{
		view {
			width: 300rpx;
			height: 100rpx;
			border-radius: 10rpx;
			margin: auto;
		}
		.left {
			background: #155BD4;
		}
		.right {
			color: #606266; 
			border: 1rpx solid #c0c4cc;
		}
	}
	.contact{
		max-height: 1000rpx;
		overflow-y: scroll;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	}
	.head {
		width: 718rpx;
		height: 174rpx;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 10rpx;
		position: absolute;
		left: 50%;
		margin-left: -359rpx;
		top: 40rpx;
		image {
			width: 100rpx;
			height: 100rpx;
		}
		.right {
			height: 100rpx;
		}
		.label {
			width: 112rpx;
			line-height: 34rpx;
			background: #DD0F10;
		}
		.back {
			line-height: 174rpx;
			top: 0;
			right: 30rpx;
		}
	}
	.back {
		color: #155BD4;
	}
	.support {
		color: #BFBEC3;
		font-size: 24rpx;
	}
</style>
